.vc-channeltabs-icon {
    height: 1.5rem;
    width: 1.5rem;
    border-radius: 50%;
}

.vc-channeltabs-guild-acronym-icon {
    height: 1.25rem;
    width: 1.5rem;
    min-width: 1.5rem;
    border-radius: 50%;
    padding-top: 0.25rem;
    background-color: var(--background-primary);
    overflow: hidden;
}

.vc-channeltabs-tab [class^="wrapper_"] {
    min-width: 1.5rem;
}

.vc-channeltabs-name-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-left: 0.125rem;
    font-weight: 400;
    color: var(--text-muted);
    transition:
        color 0.15s ease,
        font-weight 0.1s ease,
        transform 0.2s ease;
}

.vc-channeltabs-tab-inner {
    border-radius: 12px;
    padding: 0 28px 0 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    transition: gap 0.15s ease, padding 0.2s ease-in-out;
}

.vc-channeltabs-tab-container,
.vc-channeltabs-bookmark-container {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    padding: 0 4px;
}

.vc-channeltabs-container {
    --channeltabs-red: #f23f42;
    --channeltabs-blue: #0052b6;
    --channeltabs-yellow: #f0b132;
    --channeltabs-green: #24934f;
    --channeltabs-black: #000;
    --channeltabs-white: #fff;
    --channeltabs-orange: #e67e22;
    --channeltabs-pink: #ff73fa;

    padding: 4px;
    display: flex;
    flex-direction: column-reverse;
    -webkit-app-region: no-drag;
    background-color: var(--background-primary);
    box-shadow: inset 0 1px 0 var(--background-base-low);
}

.vc-channeltabs-container-top {
    padding-left: 4px;
    box-shadow: inset 0 -1px 0 var(--background-base-low);
}

.vc-channeltabs-container-top-macos {
    padding-left: 80px !important;
}

.vc-channeltabs-separator {
    width: 98%;
    height: 1px;
    background: var(--input-border);
    margin: 4px auto;
}

.vc-channeltabs-scroller {
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    white-space: nowrap;
}

.vc-channeltabs-scroller::-webkit-scrollbar {
    display: none;
}

/* tab scroller for horizontal overflow */
.vc-channeltabs-tab-scroller {
    display: flex;
    flex-direction: row;
    align-items: center;
    overflow-x: auto;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
    padding-top: 1px;
}

.vc-channeltabs-tab-scroller-following {
    width: fit-content;
    flex: unset;
}

.vc-channeltabs-tab-scroller::-webkit-scrollbar {
    display: none;
}

.vc-channeltabs-bookmarks {
    flex-grow: 1;
    overflow: hidden;
    padding: 2px 0 2px 8px;
}

/* Add spacing between bookmark items */
.vc-channeltabs-bookmarks > [class*="scroller"] {
    gap: 4px;
}

.vc-channeltabs-bookmark-placeholder-text {
    color: var(--text-muted);
    padding: 0.25rem 0 0 0.25rem;
}

.vc-channeltabs-bookmark-star {
    fill: none;
    stroke: var(--text-muted);
    stroke-width: 0.075rem;
    transition: all 0.15s ease;
}

.vc-channeltabs-bookmark-star:hover {
    stroke: var(--interactive-hover);
}

.vc-channeltabs-bookmark-star-checked {
    fill: var(--brand-experiment, var(--brand-500));
    stroke: var(--brand-experiment, var(--brand-500));
}

.vc-channeltabs-bookmark {
    display: flex;
    flex-direction: row;
    max-width: calc(8rem * var(--tab-width-scale, 1));
    padding: 4px 8px;
    border-radius: 4px;
    align-items: center;
}

.vc-channeltabs-bookmark.vc-channeltabs-wider {
    max-width: calc(12rem * var(--tab-width-scale, 1));
}

.vc-channeltabs-bookmark .vc-channeltabs-name-text {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}

.vc-channeltabs-bookmark-icon {
    height: 1rem;
    width: 1rem;
    border-radius: 50%;
    background-color: var(--background-primary);
    text-align: center;
}

.vc-channeltabs-bookmark-notification {
    height: 1rem;
    width: 1rem;
}

.vc-channeltabs-channel-info {
    flex-grow: 1;
    overflow: hidden;
}

.vc-channeltabs-tab {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-radius: 12px;
    width: calc(12rem * var(--tab-width-scale, 1));
    min-width: 0;
    margin: 0 4px;
    background-color: transparent;
    border: 1px solid var(--background-modifier-accent);
    transition:
        transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
        background-color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        opacity 0.15s ease;
    padding: 6px 8px;
    position: relative;
    cursor: grab;
    flex-shrink: 0;
}

.vc-channeltabs-tab:active {
    cursor: grabbing;
}

.vc-channeltabs-tab-resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    cursor: ew-resize;
    z-index: 10;
    opacity: 0;
    background: var(--brand-500);
    border-radius: 0 11px 11px 0;
    transition: opacity 0.2s ease;
}

.vc-channeltabs-tab-resize-handle:hover {
    opacity: 0.7 !important;
}

.vc-channeltabs-no-resize-handle-animation .vc-channeltabs-tab-resize-handle {
    transition: none !important;
}

.vc-channeltabs-tab:hover .vc-channeltabs-tab-resize-handle {
    opacity: 0.3;
}

.vc-channeltabs-tab-resizing {
    pointer-events: none;
    user-select: none;
}

.vc-channeltabs-tab-resizing * {
    pointer-events: none;
    user-select: none;
}

.vc-channeltabs-tab.vc-channeltabs-wider:not(.vc-channeltabs-tab-compact) {
    width: calc(16rem * var(--tab-width-scale, 1));
}

.vc-channeltabs-tab-compact {
    width: auto;
    min-width: calc(3rem * var(--tab-width-scale, 1));
    transition: all 0.4s ease-out;
}

.vc-channeltabs-tab-compact .vc-channeltabs-tab-inner {
    padding-right: 0;
    transition: padding 0.4s ease-out;
}

.vc-channeltabs-tab-compact:hover .vc-channeltabs-tab-inner,
.vc-channeltabs-tab-compact.vc-channeltabs-tab-selected .vc-channeltabs-tab-inner {
    padding-right: 28px;
}

.vc-channeltabs-tab-compact .vc-channeltabs-name-text {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    margin-left: 0.125rem;
    transform: translateX(-20px);
    transition:
        max-width 0.4s ease-out,
        opacity 0.4s ease-out,
        transform 0.4s ease-out;
}

.vc-channeltabs-tab-compact:hover .vc-channeltabs-name-text,
.vc-channeltabs-tab-compact.vc-channeltabs-tab-selected .vc-channeltabs-name-text {
    max-width: 200px;
    opacity: 1;
    transform: translateX(0);
}

.vc-channeltabs-tab-selected {
    transform: translateY(-1px);
    background-color: var(--background-base-low);
    border: 1px solid var(--brand-500);
    border-bottom: 2px solid var(--brand-500);
    box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
}

/* stylelint-disable-next-line no-descending-specificity */
.vc-channeltabs-tab-selected .vc-channeltabs-name-text {
    font-weight: 600;
    color: var(--white-500);
}

.vc-channeltabs-tab-selected .vc-channeltabs-guild-acronym-icon span {
    color: var(--white-500);
}

.vc-channeltabs-tab-container svg {
    -webkit-app-region: no-drag;
}

.vc-channeltabs-tab-selected svg,
.vc-channeltabs-tab-selected .vc-channeltabs-close-button svg {
    color: var(--white-500);
    fill: var(--white-500);
}

.vc-channeltabs-container [class^="iconContainer_"] {
    margin: 0 -0.25rem 0 0;
    pointer-events: none;
    height: 1rem;
    transform: scale(0.8);
}

.vc-channeltabs-container [class^="numberBadge"] {
    background-color: var(--channeltabs-red) !important;
    color: var(--channeltabs-white);
    border-radius: 50%;
    min-width: 16px;
    height: 16px;
    font-size: 11px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

.vc-channeltabs-ghost-tab {
    visibility: hidden;
}

.vc-channeltabs-hoverable:hover,
.vc-channeltabs-tab:hover:not(.vc-channeltabs-tab-selected) {
    transform: translateY(-1px) scale(1.02);
    background-color: var(--background-secondary-alt);
    border-color: var(--border-subtle);
    box-shadow: 0 2px 4px rgb(0 0 0 / 10%);
}

.vc-channeltabs-tab:active:not(.vc-channeltabs-tab-selected) {
    transform: translateY(0) scale(0.98);
    transition-duration: 0.05s;
}

.vc-channeltabs-button {
    background-color: transparent;
    color: var(--text-default);
}

.vc-channeltabs-new-button {
    padding: 4px;
    margin: 0 4px;
    border-radius: 4px;
    background-color: var(--background-base-low);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.vc-channeltabs-new-button:hover {
    background-color: var(--background-modifier-hover);
    transform: scale(1.1);
}

.vc-channeltabs-new-button:active {
    transform: scale(0.95);
}

/* stylelint-disable-next-line no-descending-specificity */
.vc-channeltabs-new-button svg {
    transition: all 0.2s ease;
}

.vc-channeltabs-new-button:hover svg {
    color: var(--interactive-hover);
    animation: vc-channeltabs-plus-spin 0.3s ease-in-out;
}

@keyframes vc-channeltabs-plus-spin {
    0% {
        transform: rotate(0deg) scale(1);
    }

    50% {
        transform: rotate(90deg) scale(1.15);
    }

    100% {
        transform: rotate(90deg) scale(1);
    }
}

.vc-channeltabs-close-button {
    height: 1rem;
    padding: 0;
    margin: 0 0 0 4px;
    border-radius: 50%;
    color: var(--text-muted);
    transition: all 0.15s ease, transform 0.2s ease-in-out;
}

.vc-channeltabs-close-button:hover {
    background-color: var(--background-modifier-hover);
    transform: rotate(90deg);
}

.vc-channeltabs-close-button:active {
    transform: rotate(90deg) scale(0.9);
}

.vc-channeltabs-tab-selected .vc-channeltabs-close-button {
    color: var(--white-500);
}

.vc-channeltabs-tab-selected .vc-channeltabs-close-button:hover {
    background-color: color-mix(in srgb, white 15%, transparent);
    transform: rotate(90deg);
}

.vc-channeltabs-tab-selected .vc-channeltabs-close-button:active {
    transform: rotate(90deg) scale(0.9);
}

.vc-channeltabs-close-button-compact {
    position: absolute;
    opacity: 0;
    width: 2rem;
    height: 2rem;
    margin-left: 0.35rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transform: translateX(-10px) scale(0.8);
    transition:
        opacity 0.3s ease-out 0.2s,
        transform 0.3s ease-out 0.2s;
    right: 4px;
}

.vc-channeltabs-tab-compact:hover .vc-channeltabs-close-button-compact,
.vc-channeltabs-tab-compact.vc-channeltabs-tab-selected .vc-channeltabs-close-button-compact {
    opacity: 1;
    transform: translateX(0) scale(1);
}

/* stylelint-disable-next-line no-descending-specificity */
.vc-channeltabs-close-button.vc-channeltabs-close-button-compact:hover {
    background-color: var(--background-modifier-hover);
    transform: translateX(0) scale(1) rotate(90deg) !important;
    transition:
        opacity 0.3s ease-out 0.2s,
        transform 0.2s ease-in-out,
        background-color 0.15s ease;
}

/* stylelint-disable-next-line no-descending-specificity */
.vc-channeltabs-close-button.vc-channeltabs-close-button-compact:active {
    transform: translateX(0) scale(0.9) rotate(90deg) !important;
    transition:
        opacity 0.3s ease-out 0.2s,
        transform 0.2s ease-in-out,
        background-color 0.15s ease;
}

.vc-channeltabs-emoji-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 1.25rem;
    width: 1.25rem;
    min-width: 1.25rem;
    border-radius: 50%;
}

.vc-channeltabs-emoji {
    height: 0.75rem;
    width: 0.75rem;
}

.vc-channeltabs-favorites-star {
    margin: 0 -0.25rem -1rem -0.75rem;
    height: 0.75rem;
    width: 0.75rem;
}

.vc-channeltabs-preview-tab {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: calc(12rem * var(--tab-width-scale, 1));
    padding: 0.125rem 0;
    min-width: 0;
    border-radius: 0.25rem;
    border: 1px solid var(--input-border);
}

.vc-channeltabs-preview-tab-compact {
    width: unset;
    min-width: unset;
}

.vc-channeltabs-preview-tab > :is(.vc-channeltabs-emoji-container,
    .vc-channeltabs-typing-indicator,
    [data-has-mention]) {
    display: none;
}

.vc-channeltabs-preview-text {
    overflow: hidden;
}

.vc-channeltabs-tab-container .vc-channeltabs-new-button,
.vc-channeltabs-tab-container .vc-channeltabs-hoverable,
.vc-channeltabs-tab-container .vc-channeltabs-button {
    -webkit-app-region: no-drag;
}

.vc-channeltabs-tab-container .vc-channeltabs-hoverable,
.vc-channeltabs-tab-container .vc-channeltabs-button,
/* stylelint-disable-next-line no-descending-specificity */
.vc-channeltabs-tab-container svg {
    -webkit-app-region: no-drag;
}

/* Red glow effect for tabs with mentions */
/* stylelint-disable-next-line no-descending-specificity */
.vc-channeltabs-tab:has([data-has-mention="true"]) {
    animation: vc-channeltabs-mention-pulse 2s ease-in-out infinite;
    box-shadow: 0 0 8px rgb(242 63 66 / 60%), 0 0 16px rgb(242 63 66 / 30%);
}

@keyframes vc-channeltabs-mention-pulse {

    /* stylelint-disable-next-line rule-empty-line-before */
    0%,
    100% {
        box-shadow: 0 0 8px rgb(242 63 66 / 60%), 0 0 16px rgb(242 63 66 / 30%);
    }

    50% {
        box-shadow: 0 0 12px rgb(242 63 66 / 80%), 0 0 24px rgb(242 63 66 / 50%);
    }
}

/* Enhance glow for selected tabs with mentions */
.vc-channeltabs-tab-selected:has([data-has-mention="true"]) {
    box-shadow:
        0 1px 3px rgb(0 0 0 / 20%),
        0 0 12px rgb(242 63 66 / 80%),
        0 0 24px rgb(242 63 66 / 50%);
}

/* Pink Nitro glow effect (easter egg) */
.vc-channeltabs-tab-nitro {
    animation: vc-channeltabs-nitro-pulse 3s ease-in-out infinite;
    box-shadow: 0 0 10px rgb(255 115 250 / 70%), 0 0 20px rgb(255 115 250 / 40%);
}

@keyframes vc-channeltabs-nitro-pulse {

    /* stylelint-disable-next-line rule-empty-line-before */
    0%,
    100% {
        box-shadow: 0 0 10px rgb(255 115 250 / 70%), 0 0 20px rgb(255 115 250 / 40%);
    }

    50% {
        box-shadow: 0 0 16px rgb(255 115 250 / 90%), 0 0 32px rgb(255 115 250 / 60%);
    }
}

/* Enhanced Nitro glow for selected tab */
.vc-channeltabs-tab-selected.vc-channeltabs-tab-nitro {
    box-shadow:
        0 1px 3px rgb(0 0 0 / 20%),
        0 0 16px rgb(255 115 250 / 90%),
        0 0 32px rgb(255 115 250 / 60%);
}

/* Nitro icon gradient animation */
.vc-channeltabs-tab-nitro .vc-channeltabs-tab-inner svg {
    filter: drop-shadow(0 0 2px rgb(255 115 250 / 80%));
}

.vc-channeltabs-tab-nitro .vc-channeltabs-tab-inner svg path {
    fill: rgb(255 115 250) !important;
    animation: vc-channeltabs-nitro-icon-gradient 3s ease-in-out infinite;
}

@keyframes vc-channeltabs-nitro-icon-gradient {

    /* stylelint-disable-next-line rule-empty-line-before */
    0%,
    100% {
        fill: rgb(255 115 250);
    }

    50% {
        fill: rgb(255 180 250);
    }
}

/* quests active gradient when quests are running */
.vc-channeltabs-tab-quests-active {
    position: relative;
    overflow: visible;
}

.vc-channeltabs-tab-quests-active::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 11px;
    background: linear-gradient(135deg,
            transparent,
            transparent 25%,
            rgb(114 137 218) 40%,
            rgb(88 101 242) 50%,
            rgb(71 82 196) 60%,
            transparent 75%,
            transparent);
    background-size: 300% 300%;
    animation: vc-channeltabs-quests-diagonal 5s linear infinite;
    opacity: 0.8;
    filter: blur(2px);
    pointer-events: none;
}

.vc-channeltabs-tab-quests-active::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 11px;
    animation: vc-channeltabs-quests-glow 3s ease-in-out infinite;
    pointer-events: none;
}

@keyframes vc-channeltabs-quests-diagonal {

    /* stylelint-disable-next-line rule-empty-line-before */
    0%,
    40% {
        background-position: 100% 0;
        opacity: 0;
    }

    50% {
        opacity: 0.8;
    }

    60%,
    100% {
        background-position: 0 100%;
        opacity: 0;
    }
}

@keyframes vc-channeltabs-quests-glow {
    0% {
        box-shadow: 0 0 8px 1px rgb(114 137 218 / 60%);
    }

    33% {
        box-shadow: 0 0 8px 1px rgb(88 101 242 / 60%);
    }

    66% {
        box-shadow: 0 0 8px 1px rgb(71 82 196 / 60%);
    }

    100% {
        box-shadow: 0 0 8px 1px rgb(114 137 218 / 60%);
    }
}

/* Enhanced gradient for selected Quests tab with active quests */
.vc-channeltabs-tab-selected.vc-channeltabs-tab-quests-active::before {
    opacity: 1;
    filter: blur(3px);
}

.vc-channeltabs-tab-selected.vc-channeltabs-tab-quests-active::after {
    animation: vc-channeltabs-quests-glow-selected 3s ease-in-out infinite;
}

@keyframes vc-channeltabs-quests-glow-selected {
    0% {
        box-shadow: 0 0 12px 2px rgb(114 137 218 / 80%);
    }

    33% {
        box-shadow: 0 0 12px 2px rgb(88 101 242 / 80%);
    }

    66% {
        box-shadow: 0 0 12px 2px rgb(71 82 196 / 80%);
    }

    100% {
        box-shadow: 0 0 12px 2px rgb(114 137 218 / 80%);
    }
}

/* Disable Quests active animations when setting is off */
.vc-channeltabs-container.vc-channeltabs-no-quests-active-animation .vc-channeltabs-tab-quests-active::before,
.vc-channeltabs-container.vc-channeltabs-no-quests-active-animation .vc-channeltabs-tab-quests-active::after {
    animation: none !important;
    opacity: 0 !important;
}

/* Tab closing animation */
@keyframes vc-channeltabs-tab-close {
    0% {
        opacity: 1;
        transform: scale(1);
        max-width: 100%;
        margin: 0 4px;
    }

    50% {
        opacity: 0.5;
        transform: scale(0.95);
        max-width: 50%;
    }

    100% {
        opacity: 0;
        transform: scale(0.9) translateX(-20px);
        max-width: 0;
        margin: 0;
        padding: 0;
    }
}

.vc-channeltabs-tab-closing {
    animation: vc-channeltabs-tab-close 0.2s ease-in-out forwards;
    pointer-events: none;
    overflow: hidden;
}

/* New tab slide-in animation */
@keyframes vc-channeltabs-tab-enter {
    0% {
        opacity: 0;
        transform: scale(0.8) translateX(-20px);
    }

    60% {
        transform: scale(1.05) translateX(0);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateX(0);
    }
}

.vc-channeltabs-tab-entering {
    animation: vc-channeltabs-tab-enter 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Icon scale on selection */
.vc-channeltabs-tab-selected .vc-channeltabs-icon,
.vc-channeltabs-tab-selected .vc-channeltabs-guild-acronym-icon {
    animation: vc-channeltabs-icon-pop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes vc-channeltabs-icon-pop {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
    }
}

/* Drag and drop visual feedback */
.vc-channeltabs-tab-dragging {
    opacity: 0.5;
    transform: rotate(3deg);
    cursor: grabbing !important;
    z-index: 1000;
    transition: none !important;
}

/* Disable tab transitions when any tab is being dragged for smoother reordering */
.vc-channeltabs-tab-container:has(.vc-channeltabs-tab-dragging) .vc-channeltabs-tab:not(.vc-channeltabs-tab-dragging) {
    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.2s ease, box-shadow 0.2s ease;
}

.vc-channeltabs-tab-drop-target {
    position: relative;
}

.vc-channeltabs-tab-drop-target::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--brand-500);
    border-radius: 3px;
    animation: vc-channeltabs-drop-indicator 0.5s ease-in-out infinite;
}

@keyframes vc-channeltabs-drop-indicator {

    /* stylelint-disable-next-line rule-empty-line-before */
    0%,
    100% {
        opacity: 0.6;
        box-shadow: 0 0 8px var(--brand-500);
    }

    50% {
        opacity: 1;
        box-shadow: 0 0 12px var(--brand-500);
    }
}

.vc-channeltabs-tab-container {
    transition: all 0.2s ease-out;
}

/* animation override settings */
/* stylelint-disable no-descending-specificity */

/* Hover animation - disable if setting is off */
.vc-channeltabs-container.vc-channeltabs-no-hover-animation .vc-channeltabs-tab:hover:not(.vc-channeltabs-tab-selected) {
    transform: none !important;
}

/* Selection animation - disable if setting is off */
.vc-channeltabs-container.vc-channeltabs-no-selection-animation .vc-channeltabs-tab-selected {
    transform: none !important;
}

/* Drag & drop animation - disable if setting is off */
.vc-channeltabs-container.vc-channeltabs-no-drag-animation .vc-channeltabs-tab-dragging {
    opacity: 1 !important;
    transform: none !important;
}

.vc-channeltabs-container.vc-channeltabs-no-drag-animation .vc-channeltabs-tab-drop-target::before {
    display: none !important;
}

.vc-channeltabs-container.vc-channeltabs-no-drag-animation .vc-channeltabs-tab-drop-target {
    transform: none !important;
    background-color: transparent !important;
    border-color: var(--background-modifier-accent) !important;
    box-shadow: none !important;
}

/* Enter/exit animation - disable if setting is off */
.vc-channeltabs-container.vc-channeltabs-no-enter-exit-animation .vc-channeltabs-tab-entering {
    animation: none !important;
}

/* Also disable closing animation for instant disappear */
.vc-channeltabs-container.vc-channeltabs-no-enter-exit-animation .vc-channeltabs-tab-closing {
    animation: none !important;
    opacity: 0 !important;
    display: none !important;
}

.vc-channeltabs-container.vc-channeltabs-no-enter-exit-animation .vc-channeltabs-tab {
    transition: opacity 0.2s ease-out,
        transform 0.2s ease-in-out,
        background-color 0.15s ease !important;
}

/* Icon pop animation - disable if setting is off */
.vc-channeltabs-container.vc-channeltabs-no-icon-pop-animation .vc-channeltabs-tab-selected .vc-channeltabs-icon,
.vc-channeltabs-container.vc-channeltabs-no-icon-pop-animation .vc-channeltabs-tab-selected .vc-channeltabs-guild-acronym-icon {
    animation: none !important;
}

/* Selected tab border - disable if setting is off */
.vc-channeltabs-container.vc-channeltabs-no-selected-border .vc-channeltabs-tab-selected {
    border: 1px solid var(--background-modifier-accent) !important;
    border-bottom: 1px solid var(--background-modifier-accent) !important;
}

/* Selected tab background - disable if setting is off */
.vc-channeltabs-container.vc-channeltabs-no-selected-background .vc-channeltabs-tab-selected {
    background-color: transparent !important;
}

/* Tab shadows - disable if setting is off */
.vc-channeltabs-container.vc-channeltabs-no-tab-shadows .vc-channeltabs-tab,
.vc-channeltabs-container.vc-channeltabs-no-tab-shadows .vc-channeltabs-tab-selected,
.vc-channeltabs-container.vc-channeltabs-no-tab-shadows .vc-channeltabs-tab:hover {
    box-shadow: none !important;
}

/* Close button rotation - disable if setting is off */
.vc-channeltabs-container.vc-channeltabs-no-close-rotation .vc-channeltabs-tab-selected .vc-channeltabs-close-button:hover {
    transform: none !important;
}

.vc-channeltabs-container.vc-channeltabs-no-close-rotation .vc-channeltabs-close-button:hover {
    transform: none !important;
}

.vc-channeltabs-container.vc-channeltabs-no-close-rotation .vc-channeltabs-tab-selected .vc-channeltabs-close-button:active {
    transform: none !important;
}

.vc-channeltabs-container.vc-channeltabs-no-close-rotation .vc-channeltabs-close-button:active {
    transform: none !important;
}

/* Plus button animation - disable if setting is off */
.vc-channeltabs-container.vc-channeltabs-no-plus-animation .vc-channeltabs-new-button:hover {
    transform: none !important;
}

.vc-channeltabs-container.vc-channeltabs-no-plus-animation .vc-channeltabs-new-button:active {
    transform: none !important;
}

.vc-channeltabs-container.vc-channeltabs-no-plus-animation .vc-channeltabs-new-button:hover svg {
    animation: none !important;
}

/* Mention glow - disable if setting is off */
.vc-channeltabs-container.vc-channeltabs-no-mention-glow .vc-channeltabs-tab:has([data-has-mention="true"]) {
    animation: none !important;
    box-shadow: 0 1px 3px rgb(0 0 0 / 20%) !important;
}

.vc-channeltabs-container.vc-channeltabs-no-mention-glow .vc-channeltabs-tab-selected:has([data-has-mention="true"]) {
    box-shadow: 0 1px 3px rgb(0 0 0 / 20%) !important;
}

/* Compact mode expansion animation - disable if setting is off */
.vc-channeltabs-container.vc-channeltabs-no-compact-animation .vc-channeltabs-tab-compact {
    transition: none !important;
}

.vc-channeltabs-container.vc-channeltabs-no-compact-animation .vc-channeltabs-tab-compact .vc-channeltabs-name-text {
    transition: none !important;
}

.vc-channeltabs-container.vc-channeltabs-no-compact-animation .vc-channeltabs-close-button-compact {
    transition: none !important;
}

/* Also disable tab-inner padding transition */
.vc-channeltabs-container.vc-channeltabs-no-compact-animation .vc-channeltabs-tab-compact .vc-channeltabs-tab-inner {
    transition: none !important;
}

/* Make close button appear instantly with more specificity */
.vc-channeltabs-container.vc-channeltabs-no-compact-animation .vc-channeltabs-tab-compact:hover .vc-channeltabs-close-button-compact,
.vc-channeltabs-container.vc-channeltabs-no-compact-animation .vc-channeltabs-tab-compact.vc-channeltabs-tab-selected .vc-channeltabs-close-button-compact {
    transition: none !important;
    transition-delay: 0s !important;
}

/* Tab positioning - disable if setting is off for INSTANT position changes */
.vc-channeltabs-container.vc-channeltabs-no-tab-positioning .vc-channeltabs-tab-container {
    transition: none !important;
}

.vc-channeltabs-container.vc-channeltabs-no-tab-positioning .vc-channeltabs-tab {
    transition: none !important;
}

.vc-channeltabs-container.vc-channeltabs-no-tab-positioning .vc-channeltabs-tab-container:has(.vc-channeltabs-tab-dragging) .vc-channeltabs-tab:not(.vc-channeltabs-tab-dragging) {
    transition: none !important;
}

/* Compact auto-expand selected - disable if setting is off */
.vc-channeltabs-container.vc-channeltabs-no-compact-auto-expand .vc-channeltabs-tab-compact.vc-channeltabs-tab-selected .vc-channeltabs-tab-inner {
    padding-right: 0 !important;
}

.vc-channeltabs-container.vc-channeltabs-no-compact-auto-expand .vc-channeltabs-tab-compact.vc-channeltabs-tab-selected .vc-channeltabs-name-text {
    max-width: 0 !important;
    opacity: 0 !important;
    transform: translateX(-20px) !important;
}

/* Hide close button on selected compact tabs when auto-expand is disabled */
.vc-channeltabs-container.vc-channeltabs-no-compact-auto-expand .vc-channeltabs-tab-compact.vc-channeltabs-tab-selected .vc-channeltabs-close-button-compact {
    opacity: 0 !important;
    pointer-events: none;
}

/* Compact hover expansion - disable if setting is off */
.vc-channeltabs-container.vc-channeltabs-no-compact-hover-expand .vc-channeltabs-tab-compact:hover .vc-channeltabs-tab-inner {
    padding-right: 0 !important;
}

.vc-channeltabs-container.vc-channeltabs-no-compact-hover-expand .vc-channeltabs-tab-compact:hover .vc-channeltabs-name-text {
    max-width: 0 !important;
    opacity: 0 !important;
    transform: translateX(-20px) !important;
}

/* Hide close button on hover for compact tabs when hover-expand is disabled */
.vc-channeltabs-container.vc-channeltabs-no-compact-hover-expand .vc-channeltabs-tab-compact:hover .vc-channeltabs-close-button-compact {
    opacity: 0 !important;
    pointer-events: none;
}

/* Enhanced caching mode - smoother transitions */
[class*="chat_"] {
    transition: opacity 0.1s ease;
}

/* Prevent flash when switching tabs with cache enabled */
[class*="scrollerInner_"] {
    scroll-behavior: auto;
}

/* Drag and drop visual feedback */
.vc-channeltabs-bookmarks-drop-target {
    background-color: color-mix(in srgb, var(--brand-500) 20%, transparent);
    border: 2px dashed var(--brand-500);
    border-radius: 4px;
}

.vc-channeltabs-bookmark.vc-channeltabs-folder-drop-target {
    background-color: color-mix(in srgb, var(--brand-500) 30%, transparent);
    border: 2px solid var(--brand-500);
    transform: scale(1.05);
    box-shadow: 0 0 8px var(--brand-500);
}

/* Folder expansion */
.vc-channeltabs-bookmark.vc-channeltabs-folder-expanded {
    background-color: var(--background-modifier-selected);
}

/* Folder item styling - indented and visually connected to folder */
.vc-channeltabs-bookmark.vc-channeltabs-folder-item {
    margin-left: 0.5rem;
    border-left: 2px solid var(--background-modifier-accent);
    padding-left: 0.5rem;
    opacity: 0.9;
    background-color: var(--background-secondary-alt);
}

.vc-channeltabs-bookmark.vc-channeltabs-folder-item:hover {
    opacity: 1;
    background-color: var(--background-modifier-hover);
}

/* Active bookmark visual indicator */
.vc-channeltabs-bookmark.vc-channeltabs-bookmark-active {
    border: 1px solid var(--brand-500);
    box-shadow: 0 0 4px var(--brand-500);
    background-color: color-mix(in srgb, var(--brand-500) 15%, transparent);
}

.vc-channeltabs-bookmark.vc-channeltabs-bookmark-active:hover {
    box-shadow: 0 0 6px var(--brand-500);
}

/* keybind Settings Styles */
.channelTabs-keybind-settings {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 8px 0;
}

.channelTabs-keybind-input {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px;
    background-color: var(--background-secondary-alt);
    border-radius: 8px;
    transition: background-color 0.2s ease;
}

.channelTabs-keybind-input:hover {
    background-color: var(--background-secondary-alt);
}

.channelTabs-keybind-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.channelTabs-keybind-controls {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.channelTabs-keybind-button {
    padding: 8px 16px;
    background-color: var(--background-base-low);
    border: 2px solid var(--input-border);
    border-radius: 8px;
    cursor: pointer;
    min-width: 140px;
    text-align: center;
    font-family: var(--font-code);
    font-weight: 600;
    color: var(--header-primary);
    transition: all 0.2s ease;
    outline: none;
    box-shadow: 0 0 0 1px var(--background-modifier-accent);
}

.channelTabs-keybind-button:hover:not(:disabled) {
    background-color: var(--background-modifier-hover);
    border-color: var(--brand-experiment);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgb(0 0 0 / 20%);
}

.channelTabs-keybind-button:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgb(0 0 0 / 20%);
}

.channelTabs-keybind-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.channelTabs-keybind-button.listening {
    background: linear-gradient(135deg, var(--brand-experiment) 0%, var(--brand-experiment-560) 100%);
    color: var(--white);
    border-color: var(--brand-experiment);
    animation: keybind-pulse 1.5s ease-in-out infinite;
    box-shadow: 0 0 12px var(--brand-experiment);
}

@keyframes keybind-pulse {

    /* stylelint-disable-next-line rule-empty-line-before */
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.85;
        transform: scale(1.02);
    }
}

.channelTabs-keybind-conflict {
    color: var(--text-feedback-critical);
    font-size: 12px;
    font-weight: 500;
    margin-top: 2px;
    animation: shake 0.3s ease;
}

@keyframes shake {

    /* stylelint-disable-next-line rule-empty-line-before */
    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-4px);
    }

    75% {
        transform: translateX(4px);
    }
}

/* Tab Number Badge Styles */
.vc-channeltabs-tab-number-badge {
    background-color: rgb(0 0 0 / 25%);
    color: var(--text-normal);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    min-width: 20px;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition:
        opacity 0.4s ease-out 0.2s,
        transform 0.4s ease-out 0.2s,
        margin 0.4s ease-out;
    flex-shrink: 0;
}

/* position: Left */
.vc-channeltabs-tab-number-badge[data-position="left"] {
    margin-right: 0.5rem;
    transition:
        opacity 0.4s ease-out,
        transform 0.4s ease-out,
        margin-right 0.4s ease-out;
}

/* position: Right */
.vc-channeltabs-tab-number-badge[data-position="right"] {
    margin-left: 0.5rem;
    transition:
        opacity 0.4s ease-out 0.2s,
        transform 0.4s ease-out 0.2s,
        margin-left 0.4s ease-out;
}

/* hover effect (slight scale up) */
.vc-channeltabs-tab:hover .vc-channeltabs-tab-number-badge {
    transform: scale(1.05);
}

/* directional slide animations for compact mode */
.vc-channeltabs-tab-compact:not(:hover, .vc-channeltabs-tab-selected) .vc-channeltabs-tab-number-badge[data-position="right"] {
    opacity: 0;
    transform: translateX(-10px) scale(0.95);
    pointer-events: none;
}

.vc-channeltabs-tab-compact:not(:hover, .vc-channeltabs-tab-selected) .vc-channeltabs-tab-number-badge[data-position="left"] {
    opacity: 0;
    transform: translateX(-15px) scale(0.9);
    pointer-events: none;
}

/* disable transitions when compact expand animation is disabled */
.vc-channeltabs-no-compact-animation .vc-channeltabs-tab-number-badge {
    transition: none !important;
}